I'm trying to add a button that changes color when clicked and changes isCompleted between true and false, what am I doing wrong? I have tried to change 'checkCompleted' to 'checkCompleted(task)' but it still gives the same error

(extra text so stackoverflow allows me post the question, they keep saying too much code and not enough text)

<template>
  <div class="container tasks">
    <div class="card" v-for="(task, index) in tasks" :key="index">
      <div class="card-content">
        <div class="card-title">
          <h4>{{ task.title }}</h4>
        </div>
        <p>{{ task.description }}</p>
        <button
          class="btn-small green"
          @click="checkCompleted"
          v-if="!isCompleted"
        >
          Completed
        </button>
        <div class="btn- red" v-else>Incomplete</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      tasks: [
        {
          title: "Read Books",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Wash Plates",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Play Fifa",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
        {
          title: "Go Gym",
          description:
            "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Alias accusamus iste asperiores excepturi tempore unde.",
          isCompleted: false,
        },
      ],
    };
  },
  methods: {
    checkCompleted() {
      this.isCompleted = this.isCompleted ? true : false;
    },
  },
};
</script>